<template>
    <div id="yyx">
        <router-link to="/">
            <i class="fa fa-reply back"></i>
        </router-link>
        <section>

            <ul style="padding: 0;">
                <li>
                    <div class="th"><img src="../imgs/yyx/pro_cont_07.png"><p>暴雨山洪</p></div>
                    <div class="th"><img src="../imgs/yyx/pro_cont_09.png"><p>梦幻太极</p></div>
                    <div class="th"><img src="../imgs/yyx/pro_cont_17.png"><p>小鸟加油</p></div>
                    <div class="th"><img src="../imgs/yyx/pro_cont_19.png"><p>海豚湾</p></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="th"><img src="../imgs/yyx/pro_cont_27.png"><p>紫禁大典</p></div>
                    <div class="th"><img src="../imgs/yyx/pro_cont_29.png"><p>八旗马战</p></div>
                    <div class="th"><img src="../imgs/yyx/pro_cont_37.png"><p>清宫秘戏</p></div>
                    <div class="th"><img src="../imgs/yyx/pro_cont_39.png"><p>花车巡游</p></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="top">

                        <div class="rd"><img src="../imgs/yyx/pro_cont_47_01.png"><p>英雄比剑</p></div>
                        <div class="rd"><img src="../imgs/yyx/pro_cont_47_03.png"><p>龙帝惊临</p></div>
                        <div class="rd"><img src="../imgs/yyx/pro_cont_47_05.png"><p>梦回秦汉</p></div>
                        <div class="clear"></div>

                    </div>
                    <div class="bottom">

                        <div class="th"><img src="../imgs/yyx/pro_cont_50.png"><p>始皇登基</p></div>
                        <div class="th"><img src="../imgs/yyx/pro_cont_52.png"><p>秦王迎宾</p></div>
                        <div class="clear"></div>

                    </div>
                </li>
                <li>

                    <div class="lt">
                        <div class="th"><img src="../imgs/yyx/pro_cont_60.png"><p>汴梁一梦</p></div>
                    </div>

                    <div class="rt">

                        <div class="th"><img src="../imgs/yyx/pro_cont_62_01.png"><p>游龙戏凤</p></div>
                        <div class="th"><img src="../imgs/yyx/pro_cont_62_03.png"><p>笑破天门阵</p></div>

                    </div>

                    <div class="clear"></div>
                </li>

                <li>

                    <div class="lt">
                        <div class="th"><img src="../imgs/yyx/pro_cont_70.png"><p>大话飞鸿</p></div>
                    </div>

                    <div class="rt">

                        <div class="th"><img src="../imgs/yyx/pro_cont_72_01.png"><p>怒海争风</p></div>
                        <div class="th"><img src="../imgs/yyx/pro_cont_72_03.png"><p>魔幻风情</p></div>

                    </div>

                    <div class="clear"></div>
                </li>

                <!-- <li>

                     <div class="top">
                         <div class="only"><a href="info_yyx_detail.aspx?YYXID=YYX1"><img src="imgs/yyx/pro_cont_80.png"/><p>秦淮八艳</p></a></div>
                     </div>

                 </li>-->


            </ul>


        </section>
    </div>
</template>

<script>
    import '../imgs/yyx/yyx.css'
    import '../imgs/yyx/shows.css'
    export default {
        name: "Yyx"
    }
</script>

<style scoped>
    #yyx {background:url(../imgs/yyx/pro_bg.jpg) no-repeat;background-size:100% 100%;padding-bottom:.55rem;}
    section ul li:nth-child(1){background:url(../imgs/yyx/pro_li_bg_05.png) no-repeat;background-size:100% 100%;padding:12% 5% 10% 5%;}
    section ul li:nth-child(2){background:url(../imgs/yyx/pro_li_bg_08.png) no-repeat;background-size:100% 100%;}
    section ul li:nth-child(3){background:url(../imgs/yyx/pro_li_bg_11.png) no-repeat;background-size:100% 100%;}
    section ul li:nth-child(4){background:url(../imgs/yyx/pro_li_bg_14.png) no-repeat;background-size:100% 100%;}
    section ul li:nth-child(5){background:url(../imgs/yyx/pro_li_bg_17.png) no-repeat;background-size:100% 100%;}
    section ul li:nth-child(6){background:url(../imgs/yyx/pro_bg_list_20.png) no-repeat;background-size:100% 100%;}
    body {margin:0; padding:0;font-family:"微软雅黑","Microsoft YaHei",hei; font-size:0.26rem; }
    a{ text-decoration:none;}
    a:link, a:visited { text-decoration:none;}
    #ztitle {margin:10px 0 0 10px;font-size:24px;}
    #shows{margin:0 10px; }
    #shows li  { border-bottom:1px #cccccc solid; border-left:1px #cccccc solid; border-right:1px #cccccc solid;  }
    .line {height:0.6rem; background:url(../imgs/yyx/crew.png) no-repeat; background-size:7rem; background-position:0 0; padding-left:24px; display:block;   margin-top:4px; font-size:0.32rem;  }
    .shows_zone {height:0.65rem;line-height:0.6rem; padding:0 0 0 10px; background-color:#364150; color:#fff;   text-align:center; font-size:0.32rem;}
    .shows_name{height:0.65rem;line-height:0.6rem; padding:0 0 0 10px;background-color:#d9edf7;  color:#3d3d3d;font-size:0.28rem;}
    /*.shows_time {height:0.65rem;line-height:0.6rem;  padding:0 0 0 10px;   color:#6f7a7e; font-size:0.28rem; min-height:auto;}*/
    .shows_time {min-height:0.65rem;line-height:0.6rem; padding:0 0 0 10px; min-width:40px;color:#6f7a7e;}
    .colorm {color:#fe5a44; font-weight:bold;  }
    .allyear{ display:inline-block; border:1px solid #fe5a44;   border-radius:5px;  font-size:0.20rem;  float:right;  padding:4px;  margin-right:10px; color:#333;}
    p{margin-bottom: 0;}
</style>